29-avgust, 2025O'zbek

React-ning useFormStatus hook-ini o'zlashtirib, formalarni muammosiz yuborish, jarayonni kuzatish va foydalanuvchi tajribasini yaxshilang. Mustahkam va qulay formalarni yaratishni o'rganing.

React useFormStatus: Formani Yuborish Holati va Jarayonni Kuzatish Bo'yicha To'liq Qo'llanma

Formalar son-sanoqsiz veb-ilovalarining asosini tashkil etib, foydalanuvchilar bilan o'zaro aloqa qilish uchun asosiy interfeys bo'lib xizmat qiladi. Biroq, formalarni yuborishni boshqarish, xatoliklarni bartaraf etish va foydalanuvchilarga fikr-mulohazalar bildirish murakkab vazifa bo'lishi mumkin. React-ning useFormStatus hook-i bu jarayonni soddalashtiradi, formani yuborish holatini kuzatish va yanada intuitiv foydalanuvchi tajribasini ta'minlashning oson yo'lini taklif qiladi.

`useFormStatus` nima?

React 18-da taqdim etilgan useFormStatus - bu <form> elementining yuborilish holati haqida ma'lumot berish uchun mo'ljallangan hook. U formaning hozirda yuborilayotganini, muvaffaqiyatli yuborilganini yoki yuborish paytida xatolikka duch kelganini aniqlash imkonini beradi. Ushbu ma'lumotlardan foydalanib, UI-ni yangilash, tugmalarni o'chirib qo'yish, yuklanish ko'rsatkichlarini namoyish qilish yoki foydalanuvchiga xato xabarlarini ko'rsatish mumkin.

`useFormStatus` dan foydalanishning asosiy afzalliklari:

Soddalashtirilgan Forma Holatini Boshqarish: Formani yuborish uchun holatni qo'lda boshqarish zaruratini yo'q qiladi, ortiqcha kodni kamaytiradi.
Yaxshilangan Foydalanuvchi Tajribasi: Formani yuborish paytida foydalanuvchilarga real vaqtda fikr-mulohazalar berib, foydalanish qulayligini oshiradi.
Kengaytirilgan Qulaylik: Yuborish paytida forma elementlarini o'chirib qo'yish va aniq xato xabarlarini taqdim etish orqali qulay forma o'zaro aloqalarini ta'minlaydi.
Optimallashtirilgan Ishlash: Formani yuborish holatini samarali kuzatib boradi, keraksiz qayta renderlarning oldini oladi.

`useFormStatus` qanday ishlaydi

useFormStatus hook-i <form> elementini render qiluvchi React komponenti ichida ishlatiladi. Hook quyidagi xususiyatlarni o'z ichiga olgan obyektni qaytaradi:

pending: Formaning hozirda yuborilayotganligini ko'rsatuvchi mantiqiy qiymat.
data: Formaning action funksiyasi tomonidan qaytarilgan ma'lumotlar (agar muvaffaqiyatli bo'lsa).
method: Formani yuborish uchun ishlatiladigan HTTP usuli (masalan, "POST", "GET").
action: Forma yuborilganda chaqirilgan funksiya.
error: Agar formani yuborishda xatolik yuz bersa, xatolik obyekti.

useFormStatus dan foydalanish uchun avval formangiz uchun action funksiyasini aniqlashingiz kerak. Bu funksiya forma yuborilganda chaqiriladi. action funksiyasi ichida siz har qanday zarur ma'lumotlarni qayta ishlash, tekshirish yoki API chaqiruvlarini amalga oshirishingiz mumkin. action funksiyasi useFormStatus hook-ining data xususiyatida mavjud bo'ladigan qiymatni qaytarishi kerak. Agar action xatolik yuzaga keltirsa, ushbu xatolik error xususiyatida mavjud bo'ladi.

`useFormStatus` ning amaliy misollari

1-misol: Asosiy Formani Yuborishni Kuzatish

Ushbu misol oddiy aloqa formasining yuborilish holatini kuzatish uchun useFormStatus dan qanday foydalanishni ko'rsatadi. Bu misol React Server Component (RSC) da ishlaydi, bu esa Next.js yoki Remix kabi freymvorkni talab qiladi.


// app/contact/page.tsx (Next.js)
'use client';

import { useFormStatus } from 'react-dom';

async function submitForm(formData: FormData) {
  "use server";
  // API chaqiruvini simulyatsiya qilish
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  if (!name || !email || !message) {
    throw new Error('Iltimos, barcha maydonlarni to\'ldiring.');
  }

  console.log('Forma ma\'lumotlari:', { name, email, message });
  return { message: 'Forma muvaffaqiyatli yuborildi!' };
}

export default function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      Ism:
      


      Email:
      


      Xabar:
      


      

      {data && {data.message}}
      {error && Xato: {error.message}}
    
  );
}

Ushbu misolda pending holati forma yuborilayotganda forma kiritish maydonlarini va yuborish tugmasini o'chirib qo'yish uchun ishlatiladi. Shuningdek, u foydalanuvchiga vizual fikr-mulohaza berish uchun tugma matnini dinamik ravishda "Yuborilmoqda..." ga o'zgartiradi. Muvaffaqiyatli bo'lganda, submitForm action-idan kelgan data ko'rsatiladi. Agar yuborish paytida xatolik yuz bersa, error xabari foydalanuvchiga ko'rsatiladi.

2-misol: Yuklanish Ko'rsatkichini Namoyish Qilish

Ushbu misol forma yuborilayotganda yuklanish ko'rsatkichini qanday namoyish qilishni ko'rsatadi. Bu, ayniqsa, uzoq davom etadigan API chaqiruvlari yoki murakkab ma'lumotlarni qayta ishlashni o'z ichiga olgan formalar uchun foydalidir.


// 1-misolga o'xshash komponent strukturasi
export default function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      {/* ... forma kiritish maydonlari ... */}

      

      {pending && Yuklanmoqda...} {/* Yuklanish ko'rsatkichini ko'rsatish */}

      {data && {data.message}}
      {error && Xato: {error.message}}
    
  );
}

Ushbu misolda pending holati `true` bo'lganda oddiy "Yuklanmoqda..." xabari ko'rsatiladi. Buni spinner yoki progress bar kabi murakkabroq yuklanish ko'rsatkichi bilan almashtirishingiz mumkin.

3-misol: Formani Tekshirish Xatolarini Bartaraf Etish

Ushbu misol useFormStatus yordamida formani tekshirish xatolarini qanday bartaraf etishni ko'rsatadi. action funksiyasi tekshiruvni amalga oshiradi va agar biror tekshirish qoidasi buzilsa, xatolik yuzaga keltiradi.


// 1-misolga o'xshash komponent strukturasi
async function submitForm(formData: FormData) {
  "use server";
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  if (!name) {
    throw new Error('Ism talab qilinadi.');
  }
  if (!email) {
    throw new Error('Email talab qilinadi.');
  }
  if (!message) {
    throw new Error('Xabar talab qilinadi.');
  }

  // API chaqiruvini simulyatsiya qilish
  await new Promise((resolve) => setTimeout(resolve, 2000));

  console.log('Forma ma\'lumotlari:', { name, email, message });
  return { message: 'Forma muvaffaqiyatli yuborildi!' };
}

export default function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      {/* ... forma kiritish maydonlari ... */}

      

      {error && Xato: {error.message}} {/* Xato xabarini ko'rsatish */}
    
  );
}

Ushbu misolda action funksiyasi ism, email va xabar maydonlarining bo'sh emasligini tekshiradi. Agar ushbu maydonlardan birortasi bo'sh bo'lsa, u tegishli xabar bilan xatolik yuzaga keltiradi. Keyin useFormStatus hook-ining error xususiyati foydalanuvchiga xato xabarini ko'rsatish uchun ishlatiladi.

Ilg'or foydalanish holatlari va mulohazalar

Uchinchi tomon forma kutubxonalari bilan integratsiya

useFormStatus formani yuborish holatini kuzatish uchun tabiiy yechimni taqdim etsa-da, uni Formik yoki React Hook Form kabi uchinchi tomon forma kutubxonalari bilan ham integratsiya qilish mumkin. Bu kutubxonalar formani tekshirish, maydonlarni boshqarish va holatni boshqarish kabi yanada ilg'or xususiyatlarni taklif qiladi. useFormStatus ni ushbu kutubxonalar bilan birlashtirib, siz yuqori darajada moslashtiriladigan va mustahkam formalar yaratishingiz mumkin.

Formik yoki React Hook Form bilan integratsiya qilish uchun ularning tegishli formani yuborish vositalaridan foydalanishingiz va umumiy yuborish holatini kuzatish uchun useFormStatus dan foydalanishingiz mumkin. Siz hali ham Server Action yaratishingiz kerak bo'ladi, lekin mijoz tomonidagi forma holatini boshqarish tanlangan kutubxona tomonidan amalga oshiriladi.

Asinxron operatsiyalarni boshqarish

Ko'pgina formalar API chaqiruvlari yoki ma'lumotlar bazasi so'rovlari kabi asinxron operatsiyalarni o'z ichiga oladi. Asinxron operatsiyalar bilan ishlaganda, formani yuborish to'g'ri boshqarilishini va foydalanuvchiga tegishli fikr-mulohazalar taqdim etilishini ta'minlash muhimdir. useFormStatus hook-i formaning asinxron operatsiya yakunlanishini kutayotganini ko'rsatish uchun ishlatilishi mumkin bo'lgan pending holatini taqdim etish orqali bu jarayonni soddalashtiradi.

Shuningdek, asinxron operatsiyalar paytida yuzaga kelishi mumkin bo'lgan har qanday xatoliklarni oqilona bartaraf etish uchun mustahkam xatoliklarni boshqarishni amalga oshirish juda muhimdir. useFormStatus hook-ining error xususiyati foydalanuvchilarga xato xabarlarini ko'rsatish uchun ishlatilishi mumkin.

Qulaylik bo'yicha mulohazalar

Qulaylik veb-dasturlashning muhim jihati bo'lib, formalar ham bundan mustasno emas. Formalarni yaratishda ularning nogironligi bo'lgan foydalanuvchilar uchun qulay bo'lishini ta'minlash muhimdir. useFormStatus hook-i quyidagilar orqali forma qulayligini oshirish uchun ishlatilishi mumkin:

Yuborish paytida forma elementlarini o'chirib qo'yish: Bu foydalanuvchilarning formani tasodifan bir necha marta yuborishini oldini oladi.
Aniq xato xabarlarini taqdim etish: Xato xabarlari qisqa, ma'lumotli va oson tushunarli bo'lishi kerak. Ular, shuningdek, ARIA atributlari yordamida tegishli forma maydonlari bilan bog'lanishi kerak.
ARIA atributlaridan foydalanish: ARIA atributlari yordamchi texnologiyalarga forma va uning elementlari haqida qo'shimcha ma'lumot berish uchun ishlatilishi mumkin. Masalan, aria-describedby atributi xato xabarlarini forma maydonlari bilan bog'lash uchun ishlatilishi mumkin.

Ishlashni optimallashtirish

useFormStatus odatda samarali bo'lsa-da, murakkab formalar yaratishda ishlash oqibatlarini hisobga olish muhimdir. useFormStatus dan foydalanadigan komponent ichida qimmat hisob-kitoblar yoki API chaqiruvlarini bajarishdan saqlaning. Buning o'rniga, bu vazifalarni action funksiyasiga topshiring.

Shuningdek, keraksiz qayta renderlardan ehtiyot bo'ling. Komponentlarning prop-lari o'zgarmaguncha qayta renderlanishini oldini olish uchun React-ning memoizatsiya usullaridan (masalan, React.memo, useMemo, useCallback) foydalaning.

`useFormStatus` dan foydalanishning eng yaxshi amaliyotlari

action funksiyalaringizni qisqa va aniq maqsadli qiling: action funksiyasi asosan ma'lumotlarni qayta ishlash, tekshirish va API chaqiruvlarini bajarishi kerak. action funksiyasi ichida murakkab UI yangilanishlari yoki boshqa yon ta'sirlarni bajarishdan saqlaning.
Foydalanuvchilarga aniq va ma'lumotli fikr-mulohazalar bering: Formani yuborish paytida foydalanuvchilarga real vaqtda fikr-mulohazalar berish uchun useFormStatus hook-ining pending, data va error xususiyatlaridan foydalaning.
Mustahkam xatoliklarni boshqarishni amalga oshiring: Formani yuborish paytida yuzaga kelishi mumkin bo'lgan har qanday xatoliklarni oqilona bartaraf eting va foydalanuvchiga ma'lumotli xato xabarlarini taqdim eting.
Qulaylikni hisobga oling: Qulaylik bo'yicha eng yaxshi amaliyotlarga rioya qilgan holda formalaringiz nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling.
Ishlashni optimallashtiring: useFormStatus dan foydalanadigan komponent ichida keraksiz qayta renderlar va qimmat hisob-kitoblardan saqlaning.

Dunyo bo'ylab real hayotdagi qo'llanmalar va misollar

useFormStatus hook-i turli sohalar va geografik joylashuvlarda turli xil forma asosidagi stsenariylarga qo'llanilishi mumkin. Mana bir nechta misollar:

Elektron tijorat (Global): Onlayn do'kon buyurtma formalarining yuborilishini kuzatish uchun useFormStatus dan foydalanishi mumkin. pending holati buyurtma qayta ishlanayotganda "Buyurtma berish" tugmasini o'chirib qo'yish uchun ishlatilishi mumkin, va error holati buyurtma yuborilmasa (masalan, to'lov muammolari yoki inventarizatsiya tanqisligi tufayli) xato xabarlarini ko'rsatish uchun ishlatilishi mumkin.
Sog'liqni saqlash (Yevropa): Sog'liqni saqlash provayderi bemorlarni ro'yxatdan o'tkazish formalarining yuborilishini kuzatish uchun useFormStatus dan foydalanishi mumkin. pending holati bemorning ma'lumotlari qayta ishlanayotganda yuklanish ko'rsatkichini ko'rsatish uchun ishlatilishi mumkin, va data holati muvaffaqiyatli ro'yxatdan o'tgandan so'ng tasdiqlash xabarini ko'rsatish uchun ishlatilishi mumkin. GDPR (Umumiy ma'lumotlarni himoya qilish reglamenti) ga muvofiqlik juda muhim va ma'lumotlar maxfiyligini buzish bilan bog'liq xato xabarlari ehtiyotkorlik bilan boshqarilishi kerak.
Ta'lim (Osiyo): Onlayn o'quv platformasi topshiriq yuklashlarini kuzatish uchun useFormStatus dan foydalanishi mumkin. pending holati topshiriq yuklanayotganda "Yuborish" tugmasini o'chirib qo'yish uchun ishlatilishi mumkin, va error holati yuklash amalga oshmasa (masalan, fayl hajmi cheklovlari yoki tarmoq muammolari tufayli) xato xabarlarini ko'rsatish uchun ishlatilishi mumkin. Turli mamlakatlarda turli xil akademik standartlar va topshirish talablari bo'lishi mumkin, ularni forma hisobga olishi kerak.
Moliyaviy xizmatlar (Shimoliy Amerika): Bank kredit arizalari formalarining yuborilishini kuzatish uchun useFormStatus dan foydalanishi mumkin. pending holati ariza qayta ishlanayotganda yuklanish ko'rsatkichini ko'rsatish uchun ishlatilishi mumkin, va data holati kreditning tasdiqlanish holatini ko'rsatish uchun ishlatilishi mumkin. Moliyaviy qoidalarga (masalan, KYC - Mijozingizni biling) rioya qilish juda muhim va muvofiqlik bilan bog'liq xato xabarlari aniq va o'ziga xos bo'lishi kerak.
Davlat xizmatlari (Janubiy Amerika): Davlat idorasi fuqarolarning fikr-mulohazalarini yuborish formalarini kuzatish uchun useFormStatus dan foydalanishi mumkin. pending holati fikr-mulohaza qayta ishlanayotganda "Yuborish" tugmasini o'chirib qo'yish uchun ishlatilishi mumkin, va data holati muvaffaqiyatli yuborilgandan so'ng tasdiqlash xabarini ko'rsatish uchun ishlatilishi mumkin. Qulaylik juda muhim, chunki fuqarolar turli darajadagi raqamli savodxonlikka va texnologiyalardan foydalanish imkoniyatiga ega bo'lishi mumkin. Forma bir nechta tillarda mavjud bo'lishi kerak.

Umumiy muammolarni bartaraf etish

useFormStatus yangilanmayapti: React 18 yoki undan keyingi versiyadan foydalanayotganingizga va formangizda to'g'ri aniqlangan action mavjudligiga ishonch hosil qiling. Server Action-ingiz "use server" direktivasi yordamida to'g'ri aniqlanganligini tekshiring.
Xato xabarlari ko'rsatilmayapti: action funksiyangiz xatoliklarni to'g'ri yuzaga keltirayotganini va komponentingizda error.message ni ko'rsatayotganingizni ikki marta tekshiring. Formani yuborish paytida konsolda har qanday xatoliklarni tekshiring.
Forma bir necha marta yuborilmoqda: Tasodifiy ikki marta bosishni oldini olish uchun yuborish tugmangiz pending holati yordamida o'chirib qo'yilganligiga ishonch hosil qiling.

Xulosa

React-ning useFormStatus hook-i formani yuborish holatini kuzatish va yaxshiroq foydalanuvchi tajribasini taqdim etishning kuchli va qulay usulini ta'minlaydi. Forma holatini boshqarishni soddalashtirish, qulaylikni oshirish va ishlashni optimallashtirish orqali useFormStatus dasturchilarga mustahkam va foydalanuvchiga qulay formalar yaratish imkonini beradi. Uning imkoniyatlari va eng yaxshi amaliyotlarini tushunib, siz React ilovalaringizda uzluksiz va jozibali forma o'zaro aloqalarini yaratish uchun useFormStatus dan foydalanishingiz mumkin.